<template>
  <div class="dashboard-editor-container" style="background-color: #1D1F46;" :style="{height:heightAll+'px'}">

    <div style="margin-left: auto;margin-right: auto;width: 100%;min-height: 800px;">
        <div style="width: 100%;height: 60px;">
          <div style="width: 1500px;height: 60px;margin: 0 auto;position: relative;">

            <div style="float: left;">
              <div style="border-bottom: #3A71A8 1px solid;height: 30px;width: 371px;"></div>
              <div style="color: #f0f0f0;padding: 3px;text-align: right;">
                <div style="float: right;">
                  {{ nowDate }}
                </div>
              </div>
            </div>

            <div style="float: left;">
              <div style="width:35px;height: 30px;"></div>
              <div style="width:35px;height:30px;box-sizing:border-box;
                background:linear-gradient(40deg, transparent 48.5%, #3A71A8 48.5%,#3A71A8 51.5%, transparent 51.5%);" ></div>
            </div>

            <div id="xg-center" >
              <div style="font-size: 30px;text-align: center;margin-top: 10px;color: #739BC3;">
                {{ indexset }}
              </div>
            </div>
            <div style="float: left;">
              <div style="width:35px;height: 30px;"></div>
              <div style="width:35px;height:30px;box-sizing:border-box;
                background:linear-gradient(-40deg, transparent 48.5%, #3A71A8 48.5%,#3A71A8 51.5%, transparent 51.5%);" ></div>
            </div>
            <div style="float: left;">
              <div style="border-bottom: #3A71A8 1px solid;height: 30px;width: 371px;"></div>
              <div style="color: #f0f0f0;padding: 3px;text-align: right;">
                <div style="float: left;">
                  <el-button
                    type="primary"
                    size="mini"
                    round
                    disabled
                  >气象数据</el-button>
                </div>
                <div style="float: left;margin-left: 10px;">
                  <el-button
                    type="primary"
                    size="mini"
                    round
                    @click="toDetail"
                  >水质数据</el-button>
                </div>
                <div style="float: left;margin-left: 10px;">
                  <el-button
                    type="primary"
                    size="mini"
                    round
                    @click="toIndex"
                  >主页</el-button>
                </div>
                <div style="float: left;margin-left: 10px;">
                  <el-button
                    type="primary"
                    size="mini"
                    round
                    @click="toVideo"
                  >实景</el-button>
                </div>

              </div>
            </div>

          </div>
        </div>
        <div style="width: 1500px;height: 800px;margin: 0 auto;position: relative;">
          <div style="width: 400px;height: 800px;float: left;border: #3A71A8 1px solid;color: #f0f0f0;">
            <div style="width: 100%;text-align: center;margin-top: 30px;font-size: 20px;">基地介绍</div>
            <div style="padding: 30px;letter-spacing:0.3em;height: 500px;"><span v-html="sysConfig.jdIntro"></span></div>
            <div style="clear: both;">
              <div style="width: 300px;margin: auto;">
                <div style="float: left;border: #3A71A8 1px solid;font-size: 20px;line-height: 50px;width: 130px;text-align: center;">约{{sysConfig.jdArea}}亩</div>
                <div style="float: left;border: #3A71A8 1px solid;font-size: 20px;line-height: 50px;width: 130px;text-align: center;margin-left: 40px;">超{{sysConfig.jdCapex}}万元</div>
              </div>
            </div>
            <div style="clear: both;">
              <div style="width: 300px;margin: auto;">
                <div style="float: left;line-height: 50px;width: 130px;text-align: center;">基地占地</div>
                <div style="float: left;line-height: 50px;width: 130px;text-align: center;margin-left: 40px;">固定资产投资</div>
              </div>
            </div>
            <div style="clear: both;">
              <div style="width: 300px;margin: auto;">
                <div style="float: left;border: #3A71A8 1px solid;font-size: 20px;line-height: 50px;width: 130px;text-align: center;">超{{sysConfig.jdLzm}}万尾</div>
                <div style="float: left;border: #3A71A8 1px solid;font-size: 20px;line-height: 50px;width: 130px;text-align: center;margin-left: 40px;">{{sysConfig.jdSeedling}}亿尾</div>
              </div>
            </div>
            <div style="clear: both;">
              <div style="width: 300px;margin: auto;">
                <div style="float: left;line-height: 50px;width: 130px;text-align: center;">良种苗</div>
                <div style="float: left;line-height: 50px;width: 130px;text-align: center;margin-left: 40px;">向社会提供幼体</div>
              </div>
            </div>
          </div>
          <div style="width: 1098px;height: 800px;float: left;position: relative;">

            <!-- 引入组件. :lock-aspect-ratio="true"：锁定纵横比例 :resizable="false": 不可缩放-->
            <vue-draggable-resizable
              w="auto"
              h="auto"
              :grid="[20,40]"
              :resizable="false"
              :draggable="false"
            >

              <div style="color: #f0f0f0;width: 719px;text-align: center;position: absolute;top: 10px;">
                <span v-for="(pointParam,i) in realDataObjWeather['pointParams']" :key="pointParam.index" :span="12" v-if="i<5">
                  {{pointParam.paramInfo.name}}:<span v-html="realDataObjWeather[pointParam.paramId]"></span>{{pointParam.paramInfo.unit}}<span style="margin: 0px 5px 0px 5px;" v-if="i!==realDataObjWeather['pointParams'].length-1">|</span>
                </span>
              </div>

              <img :src="pmtUrl" style="width: 1098px;height: 800px;">
<!--              <img :src="pmtUrl" style="width: 1918px;height: 1012px;">-->
              <div v-for="collectPoint in collectPointList" style="position:absolute;"
                   :style="{top:(collectPoint.longitude/1.27)+'px',left:(collectPoint.latitude/1.75)+'px'}" v-if="collectPoint.ispmt=='Y'" >
                <div>
                  <img :src="pic" @click="clickSite(collectPoint)" style="cursor: pointer;">
                </div>
                <div style="margin-left: 3px;">
                  <div style="width:8px;height:10px;box-sizing:border-box;
                  background:linear-gradient(120deg,transparent 58.5%,#0099FF 58.5%,rgba(0,175,255,0.60) 61.5%); float: left"></div>
                  <div style="width:8px;height:10px;box-sizing:border-box;
                background:linear-gradient(-120deg,transparent 58.5%,#0099FF 58.5%,rgba(0,175,255,0.60) 61.5%); float: left"></div>
                </div>
                <div @click="clickSite(collectPoint)" style="clear: both;color: white;font-size: 12px;border: 1px solid #027afc;border-radius: 5px;padding: 2px;background-color: rgba(0,175,255,0.6);cursor: pointer;">
                  {{collectPoint.name}}
                </div>
              </div>

              <div style="position:absolute;" :style="{top:(parseInt(collectPoint.longitude/1.27)-30)+'px',left:(parseInt(collectPoint.latitude/1.75)+30)+'px'}" >
                <div @click="clickSiteCrol(collectPoint)" style="color: white;font-size: 12px;border: 1px solid #027afc;border-radius: 5px;padding: 2px;background-color: rgba(0,175,255,0.6);cursor: pointer;">
                  6#控制
                </div>
                <div style="margin-left: 3px;">
                  <div style="width:8px;height:10px;box-sizing:border-box;
                  background:linear-gradient(60deg,transparent 58.5%,#0099FF 58.5%,rgba(0,175,255,0.60) 61.5%); float: left"></div>
                  <div style="width:8px;height:10px;box-sizing:border-box;
                background:linear-gradient(-60deg,transparent 58.5%,#0099FF 58.5%,rgba(0,175,255,0.60) 61.5%); float: left"></div>
                </div>
                <div style="clear: both;">
                  <img :src="pic" @click="clickSiteCrol(collectPoint)" style="cursor: pointer;">
                </div>
              </div>

            </vue-draggable-resizable>

          </div>

        </div>


    </div>

    <el-dialog :visible.sync="detailOpen" v-if="detailOpen" width="1918px" :center="true" append-to-body @close='closeDetailDialog'>
      <siteDetail ref="refSiteDetail" :collectPoint="collectPointVo" />
    </el-dialog>

    <el-dialog :visible.sync="detailCrolOpen" v-if="detailCrolOpen" width="1918px" :center="true" append-to-body @close='closeDetailCrolDialog'>
      <siteDetailCrol ref="refSiteDetailCrol" :collectPoint="collectPoint" />
    </el-dialog>

  </div>
</template>

<script>
  import { getSysConfig } from "@/api/basic/sysConfig";
  import { realDataWeather } from "@/api/basic/hisMain";
  import VueDraggableResizable from "vue-draggable-resizable";
  import { listCollectPointAndStatus } from "@/api/basic/collectPoint";
  import siteDetail from "./siteDetail";
  import siteDetailCrol from "./siteDetailCrol";
  const defaultSettings = require('@/settings.js');

  export default {
    name: "RelFace",
    components: {
      VueDraggableResizable,siteDetail,siteDetailCrol
    },
    data() {
      return {
        pointId:15,
        collectPoint:{},
        sysName: defaultSettings.title,
        pmtUrl:require('@/assets/image/pmt.png'),
        pic:require('@/assets/image/area.png'),
        indexset:'浙江省淡水研究所德清基地信息化服务平台',
        sysConfig:{},
        nowDate: "", // 当前日期
        heightAll: 0,
        realDataObjWeather:{ pointParams:[] },
        collectPointList:[],
        collectPointStatusMap:{},
        realDatas:{},
        detailTitle:'',
        detailOpen:false,
        detailCrolOpen:false,
        collectPointVo:{}
      };
    },
    created() {
      if(document.body.clientHeight <= 860){
        this.heightAll = 860;
      }else{
        this.heightAll = document.body.clientHeight
      }
      this.initWindow();
      setInterval(this.showTimes, 1000);
      this.querySysConfig();
      this.getRealDataWeather();
      this.getList();
    },
    methods: {
      getList() {
        listCollectPointAndStatus().then(response => {
          this.collectPointList = response.collectPoints;
          this.collectPoint = this.collectPointList.find(item=>item.id == 15)
          this.collectPointStatusMap = response.collectPointStatus;
          this.realDatas = response.realDatas;
        });
      },
      clickSite(collectPoint){
        this.collectPointVo = collectPoint;
        this.detailOpen=true;
      },
      clickSiteCrol(){
        this.detailCrolOpen=true;
      },
      closeDetailDialog(){
        this.$refs.refSiteDetail.clickStopRealPlay();
        this.$refs.refSiteDetail.onLogout();
      },
      closeDetailCrolDialog(){
        this.$refs.refSiteDetailCrol.clickStopRealPlay();
        this.$refs.refSiteDetailCrol.onLogout();
      },
      getRealDataWeather(){
        this.realDataObjWeather = {};
        realDataWeather({}).then(response => {
          this.realDataObjWeather = response.data;
        });
      },
      initWindow() {
        let _this = this
        window.onresize = () => {
          return (() => {
            if(document.body.clientHeight <= 860){
              _this.heightAll = 860;
            }else{
              _this.heightAll = document.body.clientHeight
            }

          })()
        }
      },
      toDetail(){
        this.$router.push('/breedDetail')
      },
      toIndex(){
        window.open(window.location.origin+'/index','_blank')
      },
      toVideo(){
        window.open(window.location.origin+'/monitorVideo','_blank')
      },
      querySysConfig(){
        getSysConfig().then(response => {
          if(response.data.relPmtPic!=undefined && response.data.relPmtPic){
            this.sysConfig = response.data;
            this.pmtUrl = response.data.jdPic;
            this.indexset = response.data.indexset;

            this.sysConfig.jdIntro = this.sysConfig.jdIntro.replace(/\n/g,'<br/>');
            this.sysConfig.jdIntro = this.sysConfig.jdIntro.replace(/ /g,' &nbsp');

          }
        });
      },
      currentTime() {
        setInterval(this.formatDate, 500);
      },
      formatDate() {
        let date = new Date();
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月
        let day = date.getDate(); // 日
        let week = date.getDay(); // 星期
        let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
        let hour = date.getHours(); // 时
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        let minute = date.getMinutes(); // 分
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        let second = date.getSeconds(); // 秒
        second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
        this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`;
      }

    },
    mounted() {
      this.currentTime();
    },
    // 销毁定时器
    beforeDestroy() {
      if (this.formatDate) {
        clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
      }
    },


  }
</script>

<style rel="stylesheet/scss" lang="scss">
  #xg-center{
    float: left;
    left: 665px;
    width:688px;
    height:60px;
    box-sizing:border-box;
    border-bottom: 1px solid #3A71A8;
    /*background:linear-gradient(70deg, transparent 49.5%, deeppink 49.5%,
      deeppink 50.5%, transparent 50.5%);*/
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  .vdr {
    border: none;
  }
  .el-dialog:not(.is-fullscreen) {
    margin-top:0vh !important;
  }
</style>
